<template>
  <a-modal v-model="valueTemp" title="选择人员" width="1200px" @ok="doExport">
    <div class="wrap">
      <ListSearchForBox :eventTypeLst="eventTypeLst" :templateName="templateName" class="left" @search="onSearch" />
      <div class="table">
        <a-table
          :columns="columns"
          :dataSource="dataLst"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
          :pagination="pagination"
          rowKey="id"
          size="middle"
          @change="handleTableChange"
        />
      </div>
      <div class="list">
        <div style="margin-bottom: 16px">
          已选择 <span style="color: var(--primary)">{{ selectedRows.length }}</span> 人
        </div>
        <div v-for="item in selectedRows" :key="item.id" class="item">
          <span>{{ item.empName }} {{ item.empIdCard }}</span>
          <a-icon type="close-circle" theme="filled" style="color: #d7d7d7; cursor: pointer" @click="delSelected(item.id)" />
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script>
import ListSearchForBox from "./listSearchForBox.vue";
import { treatmentDisposeEventsReq } from "../api";
import { columns } from "./funcs";
import { getToken } from "xqjr-module-auth";
import axios from "axios";
export default {
  name: "",
  components: { ListSearchForBox },
  mixins: [],
  props: {
    isFinish: {
      type: Boolean,
      default: false
    },
    eventTypeLst: {
      type: Array,
      default: () => []
    },
    value: {
      type: Boolean,
      default: false
    },
    templateId: {
      type: String,
      default: ""
    },
    templateName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      pagination: {
        pageSize: 8,
        total: 0,
        current: 1
      },
      selectedRowKeys: [],
      selectedMap: {},
      columns,
      valueTemp: false,
      dataLst: [],
      searchParams: {},
      pageNo: 1,
      pageSize: 8,
      total: 0
    };
  },
  computed: {
    selectedRows() {
      return Object.values(this.selectedMap);
    }
  },
  watch: {
    value: {
      handler(newVal) {
        if (this.valueTemp !== newVal) {
          this.valueTemp = newVal;
          if (this.valueTemp) {
            this.loadData();
          }
        }
      },
      immediate: true
    },
    valueTemp(newVal) {
      this.$emit("input", newVal);
      this.$emit("change", newVal);
    }
  },
  created() {},
  mounted() {},
  methods: {
    delSelected(id) {
      const tempMap = { ...this.selectedMap };
      delete tempMap[id];
      this.selectedMap = tempMap;
    },
    doExport() {
      if (this.templateId && this.selectedRows.length > 0) {
        axios({
          url: "/hr/api/v1/treatmentDisposeEvents/export",
          method: "post",
          data: {
            eventIdList: this.selectedRows.map((item) => item.id),
            templateId: this.templateId
          },
          responseType: "blob",
          headers: {
            token: getToken()
          }
        })
          .then((res) => {
            const link = document.createElement("a");
            const blob = new Blob([res.data], {
              type: "application/vnd.ms-excel"
            });
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            link.setAttribute("download", "批量导出.xls");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          })
          .catch((err) => {
            console.log("error log --> ", err);
          });
      } else {
        this.$message.error("未选中导出项");
      }
    },
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.loadData();
    },
    onSelectChange(selectedRowKeys) {
      const tempMap = { ...this.selectedMap };
      this.dataLst.forEach((item) => {
        if (selectedRowKeys.includes(item.id)) {
          tempMap[item.id] = item;
        } else if (tempMap[item.id]) {
          delete tempMap[item.id];
        }
      });
      this.selectedRowKeys = selectedRowKeys;
      this.selectedMap = tempMap;
    },
    onSearch(params) {
      this.searchParams = params;
      this.pagination.current = 1;
      this.loadData();
    },
    loadData() {
      const params = {
        isFinish: this.isFinish,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        templateId: this.templateId,
        ...(this.searchParams || {})
      };
      treatmentDisposeEventsReq(params)
        .then((res) => {
          if (res && res.data) {
            this.dataLst = res.data.entities;
            this.pagination.total = res.data.entityCount;
            const selectedIds = Object.keys(this.selectedMap);
            const dataIds = this.dataLst.map((item) => item.id);
            this.selectedRowKeys = selectedIds.filter((id) => dataIds.includes(id));
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.wrap {
  display: flex;
  .left {
    padding-right: 16px;
    box-shadow: inset -1px 0px 0px 0px #e8e8e8;
  }
  .table {
    padding: 0 16px;
  }
  .list {
    box-shadow: inset 1px 0px 0px 0px #e8e8e8;
    padding-left: 16px;
    .item {
      width: 200px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 4px;
    }
  }
}
</style>
